<template>
    <view>
        <view class="flex-row container-cell">
            <view class="container-left">
                <view class="flex-column center-row" v-if="data.isNewly">
                    <text style="font-size: 22rpx; white-space: nowrap; margin-top: 5rpx">新增</text>
                </view>
                <view class="flex-column center-row" v-else>
                    <view class="luqulv">
                        <text :class="data.isFit == 0 ? 'changeColor' : ''">{{ Number(data.chance) }}</text>
                        <text style="font-size: 18rpx">%</text>
                    </view>
                    <text class="text-left" :style="'color:' + chanceColor" style="white-space: nowrap">
                        {{ data.probabilityExplain }}
                    </text>
                </view>
            </view>

            <view class="container-right">
                <view class="flex-row text-right-bold">
                    <view class="flex-column">
                        <view class="flex-row">
                            <text
                                :class="data.isFit == 0 ? 'changeColor' : ''"
                                style="font-size: 32rpx"
                                @tap.stop="linkMajor(data)"
                            >
                                {{ data.professionRealName }}
                            </text>
                        </view>
                        <text class="one-school-city" v-if="!!data.remarkExt">{{ data.remarkExt }}</text>
                    </view>
                </view>

                <view class="flex-column">
                    <view class="plan">
                        <text>
                            {{ data.planYear + '年计划:' }}
                            <text class="text-464646" :class="data.isFit == 0 ? 'changeColor' : ''">
                                {{ data.planNum + '人' }}
                            </text>
                            {{ data.chooseSubjectText }}
                        </text>
                        <text>
                            代码:
                            <text class="text-464646">
                                {{ data.professionEnrollCode }}
                            </text>
                        </text>
                    </view>

                    <view class="money">
                        <text>
                            学制:
                            <text class="text-464646">{{ data.learnYear }}年</text>
                        </text>
                        <text>
                            学费:
                            <text class="text-464646">￥{{ data.cost }}</text>
                        </text>
                    </view>
                </view>
                <view
                    :class="data.isFit == 0 ? 'changeColor' : ''"
                    class="fromBox"
                    v-if="isShowMoreYearList(data.moreYear)"
                >
                    <!-- <uni-table class="from-table" emptyText="暂无更多数据"> -->
                    <view class="flex-row fromBox-head">
                        <view style="width: 14%; text-align: center" align="center">年份</view>
                        <view style="width: 14%; text-align: center" align="center">科类</view>
                        <view style="width: 12%; text-align: center" align="center">录取</view>
                        <view style="width: 18%; text-align: center" align="center">最低分</view>
                        <view style="width: 24%; text-align: center" align="center">最低位次</view>
                        <view style="width: 25%; text-align: center" align="center">
                            <view class="th-item flex-row center-row" @tap.stop="popupMessage">
                                <view>等效位差</view>
                                <image
                                    src="https://mcdn.chatgk.com/xcx/static/images/zhinengtianbao/wenhao.png"
                                    mode=""
                                    style="width: 18rpx; height: 18rpx"
                                ></image>
                            </view>
                        </view>
                    </view>
                    <!-- v-show="ele.minScore>0&&ele.minRank>0" -->
                    <view class="flex-row flex-row-table" v-for="(ele, index) in data.moreYear" :key="index">
                        <view style="width: 14%; text-align: center" align="center">
                            {{ ele.year || ' - ' }}
                        </view>
                        <view style="width: 14%; text-align: center" align="center">
                            {{ ele.course || ' - ' }}
                        </view>
                        <view style="width: 12%; text-align: center" align="center">
                            {{ ele.enterNum || ' - ' }}
                        </view>
                        <view style="width: 18%; text-align: center; position: relative" align="center">
                            {{ ele.minScore || ' - ' }}
                            <text
                                v-if="ele.zjText && ele.zjText.length > 0 && ele.minScore * 1 > 0"
                                @tap="onzhengshowboxopen(ele.year)"
                                class=""
                                style="color: red"
                            >
                                征
                            </text>
                        </view>
                        <view style="width: 24%; text-align: center" align="center">
                            {{ ele.minRank || '-' }}
                        </view>

                        <view style="width: 25%; text-align: center" align="center">
                            <span v-if="ele.equivalentBitDifference == '-' || !ele.equivalentBitDifference">-</span>
                            <span v-else-if="ele.equivalentBitDifference < 0" style="color: #ff7e36">
                                低{{ ele.equivalentBitDifference.toString().substring(1) }}
                            </span>
                            <span v-else-if="ele.equivalentBitDifference >= 0" style="color: #20ed33">
                                高{{ ele.equivalentBitDifference }}
                            </span>
                            &nbsp;
                        </view>
                    </view>
                    <!-- </uni-table> -->
                </view>
            </view>

            <template v-if="data.isFit == 1">
                <view
                    v-if="area == 3"
                    v-show="isShowFill"
                    class="flex-column center-row center-column button-major"
                    :class="data.isSelect ? 'select' : ''"
                    @tap.stop="handleOnClickTianbao(data)"
                >
                    <text v-if="data.isSelect">已填报</text>
                    <text v-else>填报</text>
                </view>
                <view
                    v-else
                    v-show="isShowFill"
                    class="button-major"
                    :class="isSelect ? 'select' : ''"
                    @tap.stop="handleOnClickTianbao(data)"
                >
                    <text v-if="isSelect">已填报</text>
                    <text v-else>填报</text>
                </view>
            </template>

            <view v-else-if="data.isFit == 0" :class="data.isFit == 0 ? 'changeColor' : ''" class="button-major no-fit">
                选科不符
            </view>
        </view>
    </view>
    <zheng-show
        v-if="zhengshowbox"
        :yearText="yearText"
        @onzhengshowbox="onzhengshowbox"
        style="width: 100vw; height: 100vh; position: fixed; top: 0; z-index: 99999"
    ></zheng-show>

    <view class="popup-center" v-show="opens" @touchmove.stop.prevent="stopscroll">
        <view class="popup-center-box">
            <view class="p-c-b-top">
                <view class="top-title">什么是等效位差？</view>
                <text>
                    历年等效位差根据考生历年的等效位-历年位次的差值得出， 换算后的等效位差可更精准的与历年位次进行比较。
                </text>
            </view>
            <view class="p-c-b-bottom">
                <view class="bottom-line"></view>
                <image
                    style="width: 60rpx; height: 40%"
                    src="https://bk.huixinshengxue.com/xcx/static/images/midTabBar/chacha@3x.png"
                    mode=""
                    @tap.stop="endPopup"
                ></image>
            </view>
        </view>
    </view>
</template>

<script>
import userManager from '/common/manager/user-manager.js';

export default {
    props: {
        data: {
            type: Object,
            default: () => {}
        },
        index: {
            type: Number,
            default: 0
        },
        isShowFill: {
            type: Boolean,
            default: true
        },
        area: {
            type: Number,
            default: 1
        },
        selectMajorNumber: {
            type: [Number, String],
            default: 0
        },
        zy_num_group: {
            type: Number,
            default: 6
        },
        volunteerNumber: {
            type: [Number, String],
            default: 6
        },
        isSelect: {
            type: Boolean,
            default: true
        }
    },
    emits: ['onClickTianbao'],
    data() {
        return {
            selectMajorCode: [],
            chanceLab: '--',
            chanceColor: '#FF3B0A',
            state: false,
            yearText: '',
            zhengshowbox: false,
            opens: false,
            arr: []
            // isSelect:
        };
    },

    watch: {
        data: {
            handler(newVal) {
                // if (this.area == 2 || this.area == 1) {
                //     this.state = this.isSelect
                // }
                const lv = this.data.chance_lv;
                if (lv == 1) {
                    this.chanceLab = '风险极大';
                    this.chanceColor = '#FF3B0A';
                } else if (lv == 2) {
                    this.chanceLab = '风险一般';
                    this.chanceColor = '#FFD43A';
                } else if (lv == 3) {
                    this.chanceLab = '风险极小';
                    this.chanceColor = '#27EC61';
                }
            },
            immediate: true,
            deep: true
        }
    },
    methods: {
        popupMessage() {
            uni.$emit('showDifferencePop2');
        },

        onzhengshowboxopen(year) {
            this.yearText = year;
            this.zhengshowbox = true;
        },
        onzhengshowbox() {
            this.zhengshowbox = false;
        },
        linkMajor(item) {
            let data = {
                search: item.professionRealName,
                code: item.majorCode
            };
            this.$request
                .searchAllMajored(data)
                .then((res) => {
                    let level = res.data[0].level;

                    if (level == 2) {
                        uni.navigateTo({
                            url: '/subpackages/subpackage1/pages/searchmajor/see-major-class?code=' + res.data[0].code
                        });
                    } else {
                        uni.navigateTo({
                            url:
                                '/subpackages/subpackage1/pages/searchmajor/search-major-majordetail?code=' +
                                res.data[0].code
                        });
                    }

                    // uni.navigateTo({
                    //     url: "/pages/searchmajor/search-major-majordetail?code=" +
                    //         res.data[0].code,
                    // });
                })
                .catch((res) => {});
        },

        handleOnClickTianbao(data) {
            // 根据区域和专业数量判断是否需要触发点击事件
            if (this.area === 2 || this.area === 1) {
                if (this.selectMajorNumber.match(/\d+/g) == this.zy_num_group) {
                    if (data.isSelect) {
                        data.isSelect = false;
                    }
                    this.$emit('onClickTianbao', data);

                    return;
                } else {
                    data.isSelect = !data.isSelect;
                    this.$emit('onClickTianbao', data);
                }
            } else {
                if (this.selectMajorNumber.match(/\d+/g) == this.zy_num_group) {
                    if (data.isSelect) {
                        data.isSelect = false;
                    }
                    this.$emit('onClickTianbao', data);
                } else {
                    data.isSelect = !data.isSelect;
                    this.$emit('onClickTianbao', data);
                }
            }
        },

        isShowMoreYearList(listArr) {
            let bool = false;

            for (let item of listArr) {
                if (item.minScore > 0 && item.minRank > 0) {
                    bool = true;
                }
            }

            return bool;
        }
    }
};
</script>

<style lang="scss" scoped>
.container-cell {
    position: relative;
    background: #ffffff;
    box-shadow: 0rpx 4rpx 8rpx 0rpx #f2f2f2;
    border-radius: 16rpx;
    margin: 24rpx 32rpx 0rpx 32rpx;
    padding: 16rpx 24rpx 20rpx 24rpx;
    display: flex;
    flex-direction: row;
}

.container-cell:first-child {
    margin-top: 0;
}

.container-cell:last-child {
    margin-bottom: 24rpx;
}

.collegeCode {
    background: #fef0e5;
    border-radius: 6rpx;
    height: 28rpx;
    margin-right: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .text {
        margin: 2rpx 4rpx;
        color: #ff3b0a;
        font-size: 16rpx;
    }
}

.container-right {
    width: 85%;
}

.container-left {
    width: 15%;
    margin-right: 20rpx;

    .luqulv {
        margin-bottom: 6rpx;
        font-size: 28rpx;
        text-align: center;
    }
}

.text-left {
    color: #ff3b0a;
    font-size: 20rpx;
    font-weight: bold;
}

.text-right-bold {
    color: #464646;
    font-size: 28rpx;
    font-weight: bold;
    width: 70%;
}

.text-999 {
    color: #999;
    font-size: 24rpx;
    margin-bottom: 10rpx;
}

.text-22 {
    color: #999;
    font-size: 22rpx;
}

.button-major {
    position: absolute;
    top: 20rpx;
    right: 30rpx;
    text-align: center;
    width: 116rpx;
    height: 48rpx;
    line-height: 48rpx;
    color: #ff3b0a;
    border: 2rpx solid #ff3b0a;
    border-radius: 24rpx;
    font-size: 22rpx;
    background-color: transparent;
    margin-bottom: 10rpx;
    box-sizing: border-box;
}

.button-major.select {
    line-height: 50rpx;
    color: #ff3b0a;
    background: rgba(255, 59, 10, 0.2);
    border: 0px;
}

.fromBox {
    width: 100%;
    font-size: 12rpx;
    margin-top: 10rpx;
    margin-left: -10rpx;

    .flex-row {
        display: flex;
        flex-direction: row;
    }

    // position: relative;
    // left: -13rpx;
    .fromBox-head {
        color: #999999;
        font-size: 22rpx;
        // margin-left: -5rpx;
    }

    .flex-row-table {
        margin-top: 10rpx;
        font-size: 20rpx;
    }

    .center-row {
        align-items: center;
    }
}

.one-school-city {
    width: 90%;
    color: #464646;
    font-weight: 400;
    font-size: 24rpx;
    margin: 8rpx 0 0 0;
    display: flex;
    flex-direction: row;
    justify-content: start;
    align-items: center;
}

.plan,
.money {
    display: flex;
    justify-content: start;
    align-items: center;
    font-size: 22rpx;
    // line-height: 32rpx;
    color: #999999;
    margin: 8rpx 0 0 0;

    text {
        display: inline-block;
    }

    .text-464646 {
        color: #464646;
        font-weight: bold;
        margin-right: 10rpx;
        font-size: 24rpx;
    }
}

.changeColor {
    color: #999999 !important;
}

.no-fit {
    width: 100rpx;
    border: none;
    font-size: 22rpx;
}
</style>
